import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Layout, Menu, Typography, Space } from 'antd';
import {
  DashboardOutlined,
  DatabaseOutlined,
  ExperimentOutlined,
  SettingOutlined,
  EnvironmentOutlined
} from '@ant-design/icons';
import './App.css';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

// Import components
import Dashboard from './pages/Dashboard';
import DatasetManagement from './pages/DatasetManagement';
import Analytics from './pages/Analytics';
import GeospatialAnalysis from './pages/GeospatialAnalysis';
import Settings from './pages/Settings';

const App: React.FC = () => {
  const [collapsed, setCollapsed] = React.useState(false);

  const menuItems = [
    {
      key: '/',
      icon: <DashboardOutlined />,
      label: 'Dashboard',
    },
    {
      key: '/datasets',
      icon: <DatabaseOutlined />,
      label: 'Datasets',
    },
    {
      key: '/analytics',
      icon: <ExperimentOutlined />,
      label: 'Analytics',
    },
    {
      key: '/geospatial',
      icon: <EnvironmentOutlined />,
      label: 'Geospatial Analysis',
    },
    {
      key: '/settings',
      icon: <SettingOutlined />,
      label: 'Settings',
    },
  ];

  return (
    <Router>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={setCollapsed}
          theme="dark"
        >
          <div className="logo" style={{ padding: '16px', textAlign: 'center' }}>
            <Title level={4} style={{ color: 'white', margin: 0 }}>
              {collapsed ? 'VA' : 'Vector Analytics'}
            </Title>
          </div>
          <Menu
            theme="dark"
            defaultSelectedKeys={['/']}
            mode="inline"
            items={menuItems}
            onClick={({ key }) => {
              window.location.pathname = key;
            }}
          />
        </Sider>

        <Layout>
          <Header style={{ background: '#fff', padding: '0 24px' }}>
            <Space align="center">
              <Title level={3} style={{ margin: 0 }}>
                Vector Analytics Platform
              </Title>
            </Space>
          </Header>

          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff' }}>
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/datasets" element={<DatasetManagement />} />
              <Route path="/analytics" element={<Analytics />} />
              <Route path="/geospatial" element={<GeospatialAnalysis />} />
              <Route path="/settings" element={<Settings />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Router>
  );
};

export default App;